<template>
  <view class="image-download-page">
    <!-- 页面标题 -->
    <view class="page-title">网络图片下载演示</view>

    <!-- 下载控制区 -->
    <view class="control-area">
      <button 
        type="primary" 
        class="download-btn"
        @click="startDownload"
        :disabled="isDownloading"
      >
        {{ isDownloading ? '下载中...' : '开始下载图片' }}
      </button>

      <!-- 下载进度显示 -->
      <view class="progress-area" v-if="isDownloading || downloadProgress > 0">
        <text class="progress-text">下载进度：{{ downloadProgress }}%</text>
        <!-- 进度条 -->
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: downloadProgress + '%' }"></view>
        </view>
      </view>
    </view>

    <!-- 图片显示区 -->
    <view class="image-display-area">
      <text class="tip-text" v-if="!imagePath && !downloadError">下载完成后将显示图片</text>
      <text class="error-text" v-if="downloadError">图片下载失败，请重试</text>
      <!-- 下载成功后显示图片 -->
      <image 
        v-else 
        :src="imagePath" 
        mode="widthFix" 
        class="downloaded-image"
        @click="previewImage"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "https://img95.699pic.com/photo/40245/5679.jpg_wh860.jpg", // 目标图片地址
      imagePath: "", // 下载后图片的临时路径
      isDownloading: false, // 是否正在下载
      downloadProgress: 0, // 下载进度（0-100）
      downloadError: false, // 下载失败标识
      downloadTask: null // 下载任务对象（用于监听进度和中断）
    };
  },
  methods: {
    /**
     * 开始下载图片：遵循PPT 4.2 uni.downloadFile()用法
     */
    startDownload() {
      // 重置状态
      this.downloadProgress = 0;
      this.downloadError = false;
      this.isDownloading = true;

      // 调用PPT指定的uni.downloadFile接口
      this.downloadTask = uni.downloadFile({
        url: this.imageUrl, // 图片网络地址（必填）
        timeout: 60000, // 超时时间（PPT默认60秒）
        success: (res) => {
          // 下载成功（状态码200）
          if (res.statusCode === 200) {
            this.imagePath = res.tempFilePath; // 存储临时路径
            console.log("图片下载成功，临时路径：", res.tempFilePath);
          } else {
            this.downloadError = true;
            console.error("图片下载失败，状态码：", res.statusCode);
          }
        },
        fail: (err) => {
          // 下载失败（如网络错误）
          this.downloadError = true;
          console.error("图片下载失败：", err);
          uni.showToast({ title: "下载失败", icon: "none" });
        },
        complete: () => {
          // 无论成功失败，结束下载状态
          this.isDownloading = false;
          this.downloadTask = null;
        }
      });

      // 监听下载进度（PPT 4.2 扩展功能）
      this.downloadTask.onProgressUpdate((progressRes) => {
        this.downloadProgress = progressRes.progress; // 更新进度（0-100）
        // 打印进度日志（符合需求）
        console.log(`下载进度：${progressRes.progress}%`);
        console.log(`已下载：${progressRes.totalBytesWritten}字节`);
        console.log(`总大小：${progressRes.totalBytesExpectedToWrite}字节`);
      });
    },

    /**
     * 预览图片：调用PPT 3.2 uni.previewImage()接口
     */
    previewImage() {
      if (this.imagePath) {
        uni.previewImage({
          urls: [this.imagePath], // 预览图片列表
          current: this.imagePath // 当前显示图片
        });
      }
    }
  },
  // 页面卸载时中断下载任务（避免内存泄漏）
  onUnload() {
    if (this.downloadTask) {
      this.downloadTask.abort();
      console.log("下载任务已中断");
    }
  }
};
</script>

<style scoped>
.image-download-page {
  padding: 30rpx;
  background-color: #fff;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.control-area {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.download-btn {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
}

.progress-area {
  padding: 0 20rpx;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background-color: #eee;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #DD524D;
  transition: width 0.3s ease;
}

.image-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.tip-text, .error-text {
  font-size: 24rpx;
  color: #666;
}

.error-text {
  color: #f56c6c;
}

.downloaded-image {
  width: 100%;
  border-radius: 12rpx;
  border: 1rpx solid #eee;
}
</style>